<template>
  <a-layout>
    <a-layout-content style="height: calc(100vh - 88px); padding: 2px">
      <VxeBasicTable ref="TableRef" v-bind="gridOptions">
        <template #toolbar_buttons>
          <TableConfig.ToolBtn
            :filter-call="handleOpenFilter"
            :create-call="handleEdit"
            :delete-call="handleDelete"
            :show-export="false"
            :show-import="false"
            :show-delete="false"
          />
        </template>
        <template #action="{ row }">
          <TableConfig.Action
            :record="row"
            @edit="handleEdit"
            @delete="handleDelete"
            @auth-menu="handleOpenAuthMenu"
            @auth-data="handleOpenAuthData"
          />
        </template>
      </VxeBasicTable>
    </a-layout-content>
    <RoleEdit v-model:visible="showEdit" :data="current" @done="reload" />
    <RoleAuth v-model:visible="showAuthMenu" :data="current" @done="reload" />
    <RoleAuthData
      v-model:visible="showAuthData"
      :data="current"
      @done="reload"
    />

    <Filter.tableFilter
      ref="FilterRef"
      @done="TableRef?.commitProxy('query')"
      v-model:visible="ifSHowFilter"
      :filter-cols="Columns"
    />
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance
  } from '@/components/VxeTable';
  import { messageLoading } from 'ele-admin-pro/es';
  import { pageRoles, removeRole } from '@/api/system/role';
  import type { Role } from '@/api/system/role/model';
  import { TableConfig, Filter } from './config';
  import Columns from './config/vxeColumn';
  import RoleEdit from './components/role-edit.vue';
  import RoleAuth from './components/role-auth.vue';
  import RoleAuthData from './components/role-data.vue';

  const TableRef = ref<VxeGridInstance>();
  const { FilterRef } = Filter;
  const ifSHowFilter = ref(false);
  // const gridOptions = reactive<BasicTableProps>({
  //   showOverflow: '',
  //   columns: Columns,
  //   height: 800,
  //   proxyConfig: {
  //     seq: true,
  //     props: {
  //       result: 'result',
  //       total: 'page.total'
  //     },
  //     ajax: {
  //       query: async ({ page }, { form }) => {
  //         const { pageSize, currentPage } = page;
  //         form.ConModels = Filter.FilterRef.value?.conModelsJson.filters;
  //         return await pageRoles({
  //           page: currentPage,
  //           pageSize,
  //           ...form
  //         });
  //       }
  //     }
  //   }
  // });
  const gridOptions = reactive<BasicTableProps>({
    border: true,
    height: 'auto',
    columnConfig: {
      resizable: true
    },
    columns: Columns,
    proxyConfig: {
      ajax: {
        query: ({ page, form }) => {
          form.ConModels = Filter.FilterRef.value?.conModelsJson;
          return pageRoles({
            ...page,
            ...form
          });
        }
      }
    }
  });

  // 当前编辑数据
  const current = ref<Role | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);
  const showAuthMenu = ref(false);
  const showAuthData = ref(false);

  /* 刷新表格 */
  const reload = () => {
    TableRef.value?.commitProxy('query');
  };

  /* 打开编辑弹窗 */
  const handleEdit = (row?: Role | null) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  const handleOpenFilter = () => {
    ifSHowFilter.value = true;
  };

  /* 打开权限分配弹窗 */
  const handleOpenAuthMenu = (row?: Role) => {
    current.value = row ?? null;
    showAuthMenu.value = true;
  };
  /* 打开权限分配弹窗 */
  const handleOpenAuthData = (row?: Role) => {
    current.value = row ?? null;
    showAuthData.value = true;
  };

  /* 删除单个 */
  const handleDelete = (row: Role) => {
    const hide = messageLoading('请求中..', 0);
    removeRole(row.id)
      .then((msg) => {
        hide();
        message.success(msg);
        reload();
      })
      .catch((e) => {
        hide();
        message.error(e.message);
      });
  };
</script>

<script lang="ts">
  export default {
    name: 'SystemRole'
  };
</script>
